<template>
	<u-popup :show="visible" @close="close" mode="bottom">
		<view class="withdrawalPopup">
			<view class="withdrawalPopup-header">
				提现规则
				<image :src="ossUrl + '/static/叉号.png'" mode="" @click="close()"></image>
			</view>
			<view class="withdrawalPopup-tx">
				{{info.withdrawal_explain}}
			</view>
			<view class="withdrawalPopup-t" @click="toDetail">账号余额</view>
			<view class="withdrawalPopup-input">
				<view class="withdrawalPopup-input-label">￥</view>
				<input type="number" :placeholder="`可提现余额${info.balance}`"
					placeholder-class="withdrawalPopup-input-label-ac" class="withdrawalPopup-input-item"
					v-model="balance" />
				<view class="withdrawalPopup-input-btn" @click="setAll">全部提现</view>
			</view>
			<view class="withdrawalPopup-t">提现方式</view>
			<view class="withdrawalPopup-list">
				<view class="withdrawalPopup-list-item" @click="setType(2)">
					<view class="withdrawalPopup-list-item-l">
						<image :src="ossUrl +  '/static/image/wx.png'" mode=""></image>
						微信
					</view>
					<image :src="type === 2 ? ossUrl + '/static/4.png' : '/static/2.png' " mode=""></image>
				</view>
				<view class="withdrawalPopup-list-item" @click="setType(1)">
					<view class="withdrawalPopup-list-item-l">
						<image :src="ossUrl +  '/static/image/zf.png'" mode=""></image>
						支付宝
					</view>
					<image :src="type === 1 ? ossUrl + '/static/4.png' : '/static/2.png'" mode=""></image>
				</view>

				<view class="withdrawalPopup-list-item" @click="setType(3)">
					<view class="withdrawalPopup-list-item-l">
						<image :src="ossUrl +  '/static/image/yh1.png'" mode=""></image>
						银行卡
					</view>
					<image :src="type === 3 ? ossUrl + '/static/4.png' : '/static/2.png' " mode=""></image>
				</view>
			</view>
			<view class="form-btns" @click="submit">确定提现</view>
		</view>
	</u-popup>
</template>

<script>
	import {
		InformationWithdrawalDetails,
		InformationWithdrawalApplication
	} from '@/common/http/api.js'
	export default {
		data() {
			return {
				visible: false,
				info: '',
				balance: '',
				type: 2 // 1支付 2微信 3银行卡

			}
		},
		created() {

		},
		methods: {
			toDetail() {
				uni.navigateTo({
					url: '/pagesA/paymentCode/paymentCode'
				})
				this.close()
			},
			setAll() {
				this.balance = Number(this.info.balance)
			},
			show() {
				this.balance = ''
				InformationWithdrawalDetails().then(res => {
					//this.balance = res.data.balance || 0
					this.info = res.data
						this.visible = true
				})
			
				
			},
			close() {
				this.visible = false
			},
			setType(type) {
				this.type = type
			},
			isPositiveNumber(value) {
				// 检查是否是有效数字
				const number = parseFloat(value);
				// 使用正则表达式检查格式
				const regex = /^(?!0\d)\d*\.?\d+$/;
				return !isNaN(number) && number > 0 && regex.test(value);
			},
			submit() {
				if (!this.isPositiveNumber(this.balance)) {
					uni.showToast({duration:3000,
						title: "请输入提现金额！",
						icon: 'none'
					})
					return
				}


				// if (this.type === 1) {
				// 	if (this.info.alipay == '') {
				// 		uni.navigateTo({
				// 			url: '/pages/paymentCode/paymentCode'
				// 		})
				// 		this.close()
				// 		return false
				// 	}
				// }
				// if (this.type === 2) {
				// 	if (this.info.wechat == '') {
				// 		uni.navigateTo({
				// 			url: '/pages/paymentCode/paymentCode'
				// 		})
				// 		this.close()
				// 		return false
				// 	}
				// }
				let data = {
					price: this.balance,
					type: this.type
				}
				uni.showLoading()
				InformationWithdrawalApplication(data).then(res => {
					uni.hideLoading()
					uni.showToast({
						title:"提交成功，等待审核",
						icon:"none",
						duration:2000
					})
					this.close()
					this.$emit('reload')
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.form-btns {

		margin: 0 auto;
		width: 100%;
		height: 80rpx;
		background: #23B97F;
		border-radius: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: white;
		margin-top: 40rpx;

	}

	.withdrawalPopup {
		width: 672rpx;
		margin: 0 auto;
		padding-bottom: 50rpx;

		.withdrawalPopup-header {
			box-sizing: border-box;
			margin-bottom: 55rpx;
			padding: 47rpx 40rpx 0;
			padding-left: 0;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 34rpx;
			color: #292929;
			position: relative;

			image {
				width: 34rpx;
				height: 34rpx;
				position: absolute;
				top: 23rpx;
				right: 0;
			}

		}

		.withdrawalPopup-tx {
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: orange;
			margin-bottom: 63rpx;
		}

		.withdrawalPopup-t {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 34rpx;
			color: #292929;
			margin-bottom: 43rpx;
		}
	}

	.withdrawalPopup-input {
		width: 100%;
		padding-bottom: 18rpx;
		border-bottom: 1rpx solid #DFDFDF;
		display: flex;
		align-items: center;
		margin-bottom: 63rpx;

		.withdrawalPopup-input-label {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 34rpx;
			color: #292929;
		}

		.withdrawalPopup-input-item {
			flex: 1;
			min-width: 0;
			margin: 0 30rpx;
			font-family: PingFang SC;
			font-weight: 600;
			font-size: 48rpx;
			height: 48rpx;
			// color: #C2C2C2;
		}



		.withdrawalPopup-input-btn {
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #23B97F;
		}

		::v-deep  .withdrawalPopup-input-label-ac {
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 26rpx !important;
			color: #C2C2C2;
		}
	}

	.withdrawalPopup-list {
		width: 100%;
		padding-bottom: 41rpx;

		.withdrawalPopup-list-item {
			width: 100%;
			height: 112rpx;
			border-radius: 55rpx;
			border: 2px solid #E3E3E3;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			padding: 0 28rpx;
			margin-bottom: 41rpx;

			.withdrawalPopup-list-item-l {
				display: flex;
				align-items: center;

				image {
					width: 70rpx;
					height: 70rpx;
					margin-right: 26rpx;
				}

				font-family: PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #292929;
			}

			&>image {
				width: 42rpx;
				height: 42rpx;
			}
		}
	}
</style>